<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建一个可控对象
        var obj = {键名:键值}
        var obj = '张三';
        var obj = Object.defineProperty({},'name',{
            get:function(){
                console.log("get...");
                return val;
            },
            set:function(newvalue){
                console.log('修改了',newvalue);
                if(val !== newvalue)
                    val = newvalue;
            },
            configurable:true,
            enumerable : true
        })
        
        // 修改一个对象为控制对象
            var obj = {
                name : "张三",
                age : 20
            }

            console.log(obj);

         // 修改obj 里的age 属性为可控制属性
            Object.defineProperty(obj,"age",{
                    get : function(){
                        return 20;
                    },
                    set : function(newvalue){
                        console.log("set",newvvalue);
                    },
                    configurable : true,
                    enumerable : true
            })   

            Object.defineProperty(obj,"name",{
                    get : function(){
                        return '张三';
                    },
                    set : function(newvalue){
                        console.log("set",newvvalue);
                    },
                    configurable : true,
                    enumerable : true
            })   
            console.log(obj);



            //封装一个观察数据的函数
            var obj = {
                name : "张三",
                age : 20
            }
            function observe(obj){
                for(var key in obj){
                    let val = obj[key];

                    Object.defineProperty(obj,key,{
                        get:function(){
                            console.log('get');
                            return val;
                        },
                        set : function(newvalue){
                            if(val != newvalue){
                                val = newvalue;
                            }
                        },
                        configurable : true,
                        enumerable : true
                    })
                }
            }
            observe(obj);
            obj.name;
            obj.age;
            console.log(obj);
    </script>
</body>
</html>